<!-- eslint-disable prettier/prettier -->
<template>
  <view class="container">
    <view class="info-card">
      <view class="h2">我的资料</view>
      <view class="gender-selection">
        <button class="gender-button" :class="{ selected: gender === 'male' }" @click="gender = 'male'">
          <view class="icon male-icon">
            <uv-icon name="man" size="68" :color="gender === 'male' ? '$uni-main-color' : '#d9d9d9'"></uv-icon>
          </view>
          <text>我是男生</text>
        </button>
        <button class="gender-button" :class="{ selected: gender === 'female' }" @click="gender = 'female'">
          <view class="icon female-icon">
            <uv-icon name="woman" size="68" :color="gender === 'female' ? '$uni-main-color' : '#d9d9d9'"></uv-icon>
          </view>
          <text>我是女生</text>
        </button>
      </view>
      <view class="birth-year">
        <text for="birthYear">出生年份</text>

        <picker mode="date" fields="year" :value="date" :start="getDate('start')" :end="getDate('end')"
          @change="bindDateChange" style="font-size: 14px">
          <view class="uni-input">{{ date.length > 0 ? date : '请选择' }}</view>
        </picker>
      </view>
      <button class="confirm-button" @click="confirmInfo">确定</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useConfigStore, useUserStore } from '@/stores'
import { PATH_LOGIN } from '@/pagePath'
import { ref, computed } from 'vue'

// 性别状态
const gender = ref('male')

// 出生年份状态
const birthYear = ref(2000)
const date = ref('')
// const dataStr = ref('')

// 确认信息的方法
const confirmInfo = () => {
  console.log('性别:', gender.value)
  console.log('出生年份:', birthYear.value)
}

const bindDateChange = (e: any) => {
  date.value = e.detail.value
}

const getDate = (type: string) => {
  const date = new Date()
  let year = date.getFullYear()
  if (type === 'start') {
    year = year - 70
  } else if (type === 'end') {
    year = year - 17
  }
  return `${year}`
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.info-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  margin-top: -40px;
}

.h2 {
  margin-bottom: 20px;
  font-size: 18px;
}

.gender-selection {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;

  .gender-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    background-color: #fff;
    color: $uni-bg-color-grey;

    // .male-icon::before {
    //   content: '♂';
    // }

    // .female-icon::before {
    //   content: '♀';
    // }

    .icon {
      width: 70px;
      height: 70px;
      line-height: 70px;
      border: 2px solid $uni-bg-color-grey;
      border-radius: 50%;

      &::before {
        font-size: 60px;
        color: $uni-bg-color-grey;
      }
    }

    text {
      font-size: 12px;
    }
  }

  .selected {
    color: $uni-main-color;

    .icon {
      border-color: $uni-main-color;
      color: $uni-main-color;

      &::before {
        color: $uni-main-color;
      }
    }
  }
}

.birth-year {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 7px;
  border: 1px solid $uni-bg-color-grey;
  width: 182px;
  height: 34px;
  margin-top: 20px;
  padding: 0 10px;

  text {
    margin-right: 10px;
    font-size: 14px;
  }
}

.confirm-button {
  background-color: $uni-main-color;
  width: 100px;
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  font-size: 14px;
  color: #fff;
}
</style>
